<template>
  <div class="home">

    <div class="goods">
            <!-- 侧边栏 -->
            <van-sidebar v-model="active" @change="onChange">
                <van-sidebar-item :title="item.name" v-for="(item,index) in goodsList" :key="index"/>
                
            </van-sidebar>
            <div class="right">
                <!-- 不封装组件用vant的商品卡片 -->
               <!-- <van-card
                   v-for="(item,index) in children"

                   :key="index"
                    :price="item.min_price"
                    
                    :title="item.name"
                    :thumb="item.img"
                    >
                    <template #footer>
                        <van-button size="mini">添加</van-button>
                    </template>
                    </van-card> -->
                    <!-- 封装组件，自己写样式 -->
                    <list v-for="(item,index) in children"
                   :key="index" :item="item" @click="goDetail(item)"></list>

            </div>

    </div>
    <!-- 底部 -->
    <div class="foot">
        <div @click="show = !show" :class="{active:$store.state.cartList.length==0?false:true}">总价格：{{$store.getters.getPrice}}</div>
        <div>总数：{{$store.getters.getSum}}</div>
    </div>
    <!-- 弹出框 -->
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
        <div class="pop-cart">
            <p @click="clearCart">清空购物车</p>
            <ul class="ul">
                <h5>1号口袋</h5>
                <!-- v-for 和v-show一起使用可以做筛选 -->
                <!-- .self  修饰符只触发本身 -->
                <li v-for="(item,index) in $store.state.cartList" :key="index" v-show="item.status == 0" @touchstart.self="change(index)">
                    <p>{{item.name}}</p>
                    <p>小计￥{{item.min_price*item.num}}</p>
                    <!-- 步进器 -->
                    <van-stepper  v-model="item.num" theme="round" button-size="22" disable-input />
                </li>
            </ul>
             <ul class="ul">
                <h5>2号口袋</h5>
                <li v-for="(item,index) in $store.state.cartList" :key="index" v-show="item.status == 1" @touchstart.self="change1(index)">
                    <p>{{item.name}}</p>
                     <p>小计￥{{item.min_price*item.num}}</p>
                    <!-- 步进器 -->
                    <van-stepper v-model="item.num" theme="round" button-size="22" disable-input />

                </li>
            </ul>
             <ul class="ul">
                <h5>3号口袋</h5>
                <li v-for="(item,index) in $store.state.cartList" :key="index" v-show="item.status == 2">
                    <p>{{item.name}}</p>
                     <p>小计￥{{item.min_price*item.num}}</p>
                    <!-- 步进器 -->
                    <van-stepper v-model="item.num" theme="round" button-size="22" disable-input />

                </li>
            </ul>
           
        </div>

    </van-popup>

  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'
import {reactive,toRefs} from 'vue'
import list from '@/components/list.vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
export default {
//   name: 'HomeView',
  components: {
    list
  },
  setup(props) {
    const {commit,state} = useStore()
    const {push} = useRouter()
    const data = reactive({
        goodsList:[],//存放请求过来的数据
        active:0,//侧边栏的第一个默认选中
        children:[],//保存二级菜单
        show:false,//弹出框的状态
        flag:false,
       
        
    })
    axios.get('goods.json').then(res=>{
        console.log(res)
        data.goodsList = res.data.data.food_spu_tags
       
        // data.goodsList = res.data.data.foods

         console.log(data.goodsList);
        //  调用onChange方法
        onChange(0)

    })
    // 侧边栏的点击事件
    const onChange = (val)=>{

      console.log(val);//val就是一层菜单的下标  
      data.children = data.goodsList[val].spus
    }

   data.flag =  state.cartList.some(item=>item.status == 1)
   console.log(data.flag);
  

    // 清空购物车
    const clearCart=()=>{
        commit('clearCart')
    
    }
    // 商品列表跳详情
   const goDetail=(item)=>{
    push({path:'/about',query:{item:JSON.stringify(item)}})
        
   }

// 点击加入2号口袋
   const change = (index)=>{
    commit('change',index)

   }
//    点击加入3号口袋
const change1 = (index)=>{
     commit('change1',index)
}

    return {...toRefs(data),onChange,clearCart,goDetail,change,change1}
  }
}

</script>
<style lang="scss" scoped>
.goods{
    display: flex;
    .right{
        flex:1;
    }

}
.foot{
    display: flex;
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    z-index: 9999999;
    >div{
        width: 50%;
        height: 50px;
        line-height: 50px;
        background: #333;
        text-align: center;
        color: #fff;
         
    }
}
.pop-cart{
    height: 250px;
    overflow-y: scroll;
    .ul{
        padding: 15px 0;
        li{
            display: flex;
            align-items: center;
            justify-content: space-between;
            
        
        }
    }
   
}

.active{
    background:orange!important;
}
</style>

